<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>订单管理</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link rel="stylesheet" type="text/css" href="css/mui.min.css"/>
    <link rel="stylesheet" type="text/css" href="css/order.css"/>
</head>
<body>
	<header class="mui-bar mui-bar-nav">
	    <a href="javascript:history.go(-1)" class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
	    <h1 class="mui-title">订单管理</h1>
	</header>

	<div class="mui-content">
	    <!--选项卡-->
		<div class="mui-segmented-control control">
		    <a class="mui-control-item mui-active" href="#">全部</a>
		    <a class="mui-control-item" href="#">待发货</a>
		    <a class="mui-control-item" href="#">已发货</a>
		    <a class="mui-control-item" href="#">已收货</a>
		</div>
		
		<div class="mui-slider slider">
			<div class="mui-slider-group">
				<!--第一个内容区容器-->
				<div class="mui-slider-item">
					
					<!-- 我买入的 -->
					
					<div class="mui-card">
						<!--页眉，放置标题-->
						<div class="mui-card-header mui-card-media">
							<img src="img/shop_fill.png" />
							<div class="mui-media-body">
								<span><a href="#">焦作雷猫</a></span>
								<p>未确认</p>
							</div>
						</div>
						<!--内容区-->
						<div class="mui-card-content">
							<ul class="mui-table-view">
							    <li class="mui-table-view-cell mui-media">
							        <div>
							            <img class="mui-media-object mui-pull-left" src="img/1547134351微信图片_20181011122759.jpg">
							            <div class="mui-media-body">
							                <p class="mui-ellipsis-2">红枣枸杞薏米粉</p>
							                <div class="right-content">
							                	<p>￥ 78.00</p>
							                	<em>×1</em>
							                </div>
							            </div>
							        </div>
							    </li>
							    <li class="mui-table-view-cell mui-media">
							        <div>
							            <img class="mui-media-object mui-pull-left" src="img/1547134351微信图片_20181011122759.jpg">
							            <div class="mui-media-body">
							                <p class="mui-ellipsis-2">红枣枸杞薏米粉</p>
							                <div class="right-content">
							                	<p>￥ 78.00</p>
							                	<em>×1</em>
							                </div>
							            </div>
							        </div>
							    </li>
							</ul>
							
						</div>
						<!--页脚，放置补充信息或支持的操作-->
						<div class="mui-card-footer">
							<!--物流信息-->
							<!--  logistics 参数是物流公司	clipboard-text 参数是运单号	-->
							<div><!--<button class="logistics" data-logistics='' data-clipboard-text="">物流信息</button>--></div>
							<div>共 <span>2</span> 件商品&nbsp;&nbsp;&nbsp;合计：<span>￥156.00</span></div>
						</div>
					</div>
					
					<div class="mui-card">
						<!--页眉，放置标题-->
						<div class="mui-card-header mui-card-media">
							<img src="img/shop_fill.png" />
							<div class="mui-media-body">
								<span><a href="#">沃洋优品</a></span>
								<p class="warning">已发货</p>
							</div>
						</div>
						<!--内容区-->
						<div class="mui-card-content">
							<ul class="mui-table-view">
							    <li class="mui-table-view-cell mui-media">
							        <div>
							            <img class="mui-media-object mui-pull-left" src="img/1548171278a.jpg">
							            <div class="mui-media-body">
							                <p class="mui-ellipsis-2">Mistine维他命E梦幻变色润唇膏泰国小草莓唇膏保湿滋润</p>
							                <div class="right-content">
							                	<p>￥ 26.00</p>
							                	<em>×1</em>
							                </div>
							            </div>
							        </div>
							    </li>
							</ul>
							
						</div>
						<!--页脚，放置补充信息或支持的操作-->
						<div class="mui-card-footer">
							<div><button class="logistics" data-logistics='1申通' data-clipboard-text="396451995306">物流信息</button></div>
							<div>共 <span>1</span> 件商品&nbsp;&nbsp;&nbsp;合计：<span>￥26.00</span></div>
						</div>
					</div>
					
					<div class="mui-card">
						<!--页眉，放置标题-->
						<div class="mui-card-header mui-card-media">
							<img src="img/shop_fill.png" />
							<div class="mui-media-body">
								<span><a href="#">沃洋优品</a></span>
								<p class="success">已收货</p>
							</div>
						</div>
						<!--内容区-->
						<div class="mui-card-content">
							<ul class="mui-table-view">
							    <li class="mui-table-view-cell mui-media">
							        <div>
							            <img class="mui-media-object mui-pull-left" src="img/1548171278a.jpg">
							            <div class="mui-media-body">
							                <p class="mui-ellipsis-2">Mistine维他命E梦幻变色润唇膏泰国小草莓唇膏保湿滋润</p>
							                <div class="right-content">
							                	<p>￥ 26.00</p>
							                	<em>×1</em>
							                </div>
							            </div>
							        </div>
							    </li>
							</ul>
							
						</div>
						<!--页脚，放置补充信息或支持的操作-->
						<div class="mui-card-footer">
							<div><button class="logistics" data-logistics='2申通' data-clipboard-text="396451995306">物流信息</button></div>
							<div>共 <span>1</span> 件商品&nbsp;&nbsp;&nbsp;合计：<span>￥26.00</span></div>
						</div>
					</div>
					
				</div>
				<!--第二个内容区-->
				<div class="mui-slider-item">
					
					<!-- 待发货 -->
					
					<div class="mui-card">
						<!--页眉，放置标题-->
						<div class="mui-card-header mui-card-media">
							<img src="img/shop_fill.png" />
							<div class="mui-media-body">
								<span><a href="#">焦作雷猫</a></span>
								<p>未确认</p>
							</div>
						</div>
						<!--内容区-->
						<div class="mui-card-content">
							<ul class="mui-table-view">
							    <li class="mui-table-view-cell mui-media">
							        <div>
							            <img class="mui-media-object mui-pull-left" src="img/1547134351微信图片_20181011122759.jpg">
							            <div class="mui-media-body">
							                <p class="mui-ellipsis-2">红枣枸杞薏米粉</p>
							                <div class="right-content">
							                	<p>￥ 78.00</p>
							                	<em>×1</em>
							                </div>
							            </div>
							        </div>
							    </li>
							    <li class="mui-table-view-cell mui-media">
							        <div>
							            <img class="mui-media-object mui-pull-left" src="img/1547134351微信图片_20181011122759.jpg">
							            <div class="mui-media-body">
							                <p class="mui-ellipsis-2">红枣枸杞薏米粉</p>
							                <div class="right-content">
							                	<p>￥ 78.00</p>
							                	<em>×1</em>
							                </div>
							            </div>
							        </div>
							    </li>
							</ul>
							
						</div>
						<!--页脚，放置补充信息或支持的操作-->
						<div class="mui-card-footer">
							<!--物流信息-->
							<div><!--<button class="logistics" data-logistics='' data-clipboard-text="">物流信息</button>--></div>
							<div>共 <span>2</span> 件商品&nbsp;&nbsp;&nbsp;合计：<span>￥156.00</span></div>
						</div>
					</div>
				</div>
				<!--第三个内容区-->
				<div class="mui-slider-item">
					
					<!-- 已发货 -->
					<div class="mui-card">
						<!--页眉，放置标题-->
						<div class="mui-card-header mui-card-media">
							<img src="img/shop_fill.png" />
							<div class="mui-media-body">
								<span><a href="#">沃洋优品</a></span>
								<p class="warning">已发货</p>
							</div>
						</div>
						<!--内容区-->
						<div class="mui-card-content">
							<ul class="mui-table-view">
								<li class="mui-table-view-cell mui-media">
									<div>
										<img class="mui-media-object mui-pull-left" src="img/1548171278a.jpg">
										<div class="mui-media-body">
											<p class="mui-ellipsis-2">Mistine维他命E梦幻变色润唇膏泰国小草莓唇膏保湿滋润</p>
											<div class="right-content">
												<p>￥ 26.00</p>
												<em>×1</em>
											</div>
										</div>
									</div>
								</li>
							</ul>
					
						</div>
						<!--页脚，放置补充信息或支持的操作-->
						<div class="mui-card-footer">
							<div><button class="logistics" data-logistics='1申通' data-clipboard-text="396451995306">物流信息</button></div>
							<div>共 <span>2</span> 件商品&nbsp;&nbsp;&nbsp;合计：<span>￥26.00</span></div>
						</div>
					</div>
				</div>
				<!--第四个内容区-->
				<div class="mui-slider-item">
					
					<!-- 已收货 -->
					
					<div class="mui-card">
						<!--页眉，放置标题-->
						<div class="mui-card-header mui-card-media">
							<img src="img/shop_fill.png" />
							<div class="mui-media-body">
								<span><a href="#">沃洋优品</a></span>
								<p class="success">已收货</p>
							</div>
						</div>
						<!--内容区-->
						<div class="mui-card-content">
							<ul class="mui-table-view">
							    <li class="mui-table-view-cell mui-media">
							        <div>
							            <img class="mui-media-object mui-pull-left" src="img/1548171278a.jpg">
							            <div class="mui-media-body">
							                <p class="mui-ellipsis-2">Mistine维他命E梦幻变色润唇膏泰国小草莓唇膏保湿滋润</p>
							                <div class="right-content">
							                	<p>￥ 26.00</p>
							                	<em>×1</em>
							                </div>
							            </div>
							        </div>
							    </li>
							</ul>
							
						</div>
						<!--页脚，放置补充信息或支持的操作-->
						<div class="mui-card-footer">
							<div><button class="logistics" data-logistics='2申通' data-clipboard-text="396451995306">物流信息</button></div>
							<div>共 <span>2</span> 件商品&nbsp;&nbsp;&nbsp;合计：<span>￥26.00</span></div>
						</div>
					</div>
				</div>
			</div>
		</div>
		
	</div>
	
    
    <script src="js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/clipboard.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/mui.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
    	mui.init()
    	
		/*****	 点击切换页面	******/
		mui('.mui-segmented-control').on('tap','.mui-control-item',e=>{
			mui('.mui-slider').slider().gotoItem($(e.target).index())
		})
		/******	   监听slider	********/
		$('.mui-slider').on('slide',e=>{
			$('.mui-segmented-control .mui-control-item').removeClass('mui-active')
			$('.mui-segmented-control .mui-control-item').eq(e.detail.slideNumber).addClass('mui-active')
		})
		
		/*******	点击复制订单号	*******/
		var clipboard = new ClipboardJS('.logistics');
		
		clipboard.on('success', function(e) {
			let logistics = $(e.trigger).data('logistics')
			let singlenum = e.text
			/*******	弹出物流公司和运单号	********/
			mui.alert(`物流公司为:${logistics}\n订单号为:${singlenum}`,'物流信息',['关闭'],e=> {
					mui.toast('已为您复制订单号')
				},'div')
		    e.clearSelection();
		});
		
		clipboard.on('error', function(e) {
		    console.error('Action:', e.action);
		    console.error('Trigger:', e.trigger);
		});


    </script>
</body>
</html>

